<template>
  <div class="pc-resolve">
    <div class="resolve-banner">
      <img
        :src="require('../../assets/imgs/resolve-detail/banner-resolve-detail.png')"
        @click="goLogin"
        @load="loadImg('resolve-detail-img', 1200, 340, 1200)"
        class="resolve-detail-img"
      >
    </div>
    <div class="resolve-scheme">
      <div class="resolve-scheme-content">
        <div class="resolve-scheme-title">科技升级方案</div>
        <div>
          <img
            :src="src"
            @load="loadImg('resolve-scheme-img', 1200, 774, 1200)"
            class="resolve-scheme-img"
          >
        </div>
      </div>
    </div>
    <div class="resolve-advantage">
      <div class="resolve-advantage-content">
        <div class="resolve-advantage-title">方案优势</div>
        <div class="resolve-advantage-images">
          <img :src="require('../../assets/imgs/resolve-detail/banner-adv.png')">
          <!-- <img :src="require('../../assets/imgs/bg_1.png')" class="resolve-advantage-one">
          <img :src="require('../../assets/imgs/bg_2.png')" class="resolve-advantage-two">-->
        </div>
      </div>
    </div>
    <div class="resolve-product">
      <div class="resolve-product-content">
        <div class="resolve-product-title">相关产品</div>
        <div class="resolve-product-container">
          <div :key="i" class="container-out" v-for="(item , i) in products">
            <div class="container">
              <div>
                <div class="item-up">
                  <div class="item-icon">
                    <img :src="item.src">
                  </div>
                  <div class="item-title">{{item.title}}</div>
                </div>
                <div class="item-down">
                  <div class="content">{{item.content}}</div>
                  <div class="button">
                    <el-button round>了解详情</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
  </div>
</template>

<script>
import { loadImg } from '../../utils/util';
import login from './login';
export default {
    components: {
        login,
    },
    data() {
        return {
            showmask: false,
            src: '',
            dialogVisible: false,
            isSignIn: '',
            products: [
                {
                    title: '微信签到',
                    src: require('../../assets/imgs/product_nav/wx-sign.png'),
                    content: '是一项观众使用微信扫码功能进行会议活动签到的服务',
                    bg: '',
                },
                {
                    title: '大屏抽奖',
                    src: require('../../assets/imgs/product_nav/screen-lucky.png'),
                    content: '是一项把线下抽奖活动班上大屏幕的服务',
                    bg: '',
                },
                {
                    title: '滚屏播报',
                    src: require('../../assets/imgs/product_nav/scrolling-ticker1.png'),
                    content: '是一项强调信息展示的服务',
                    bg: '',
                },
                {
                    title: '自定义场景',
                    src: require('../../assets/imgs/product_nav/cus-scene.png'),
                    content: '是梦数互动的一大特色',
                    bg: '',
                },
            ],
        };
    },
    mounted() {
        this.loadImg = loadImg;
        this.loadImg('resolve-detail-img', 1200, 340, 1200);
        this.loadImg('resolve-scheme-img', 1200, 774, 1200);
        window.addEventListener(
            'resize',
            () => {
                this.loadImg('resolve-detail-img', 1200, 340, 1200);
                this.loadImg('resolve-scheme-img', 1200, 774, 1200);
            },
            false
        );
        this.src = require('../../assets/imgs/resolve-detail/' +
            this.$route.query.name +
            '.png');
    },
    methods: {
        loadImg() {},
        goLogin(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
            this.showmask = true;
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.$emit('showLogin', false);
            this.showmask = false;
        },
        close() {
            this.showmask = false;
        },
    },
};
</script>

<style lang="less">
.pc-resolve {
    .resolve-banner {
        background: #000;
        img {
            display: block;
            margin: 0 auto;
            width: 1200px;
            cursor: pointer;
        }
    }
    .resolve-scheme {
        background-color: rgb(242, 242, 242);
        .resolve-scheme-content {
            width: 1200px;
            margin: 0 auto;
            .resolve-scheme-title {
                text-align: center;
                font-size: 26px;
                font-weight: bold;
                padding: 30px 0;
            }
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .resolve-advantage {
        background-color: rgb(251, 251, 251);
        .resolve-advantage-content {
            width: 1200px;
            margin: 0 auto;
            .resolve-advantage-title {
                font-weight: bold;
                font-size: 26px;
                text-align: center;
                padding: 30px 0;
            }
            .resolve-advantage-images {
                // display: flex;
                // img {
                //     width: 50%;
                //     height: 330px;
                // }
            }
        }
    }
    .resolve-product {
        background-color: rgb(251, 251, 251);
        .resolve-product-content {
            width: 1200px;
            margin: 0 auto;
            .resolve-product-title {
                padding: 30px 0;
                font-weight: bold;
                font-size: 26px;
                text-align: center;
            }
            .resolve-product-container {
                display: flex;
                flex-wrap: wrap;
                .container-out {
                    width: 25%;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                    &:nth-child(4n + 1) {
                        padding-right: 10px;
                    }
                    &:nth-child(4n + 2),
                    &:nth-child(4n + 3) {
                        padding: 0 10px;
                    }
                    &:nth-child(4n) {
                        padding-left: 10px;
                    }
                    .container {
                        border: 2px solid transparent;
                        & > div {
                            border: 1px solid #ccc;
                            .item-up {
                                display: flex;
                                height: 126px;
                                text-align: center;
                                background-color: #fff;
                                padding: 0 35px;
                                .item-icon {
                                    width: 50%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                                .item-title {
                                    width: 50%;
                                    line-height: 126px;
                                }
                            }
                            .item-down {
                                padding: 0 35px;
                                height: 110px;
                                box-sizing: border-box;
                                border-top: 1px solid #ccc;
                                .content {
                                    font-size: 12px;
                                    line-height: 20px;
                                    height: 70px;
                                    box-sizing: border-box;
                                    padding-top: 15px;
                                }
                                .button {
                                    button {
                                        padding: 5px 15px;
                                        border: 1px solid #1994fa;
                                        color: #1994fa;
                                    }
                                }
                            }
                        }
                        &:hover {
                            border: 2px solid #1994fa;
                            & > div {
                                border: 1px solid #1994fa;
                                button {
                                    background: #1994fa;
                                    span {
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .pc-resolve {
        .resolve-advantage {
            .resolve-advantage-content {
                width: 100%;
                .resolve-advantage-images {
                    // img {
                    //     height: 160px;
                    // }
                }
            }
        }
        .resolve-scheme {
            .resolve-scheme-content {
                width: 100%;
                margin: 0 auto;
            }
        }
        .resolve-product {
            .resolve-product-content {
                width: 100%;
                .resolve-product-container {
                    .container-out {
                        width: 50%;
                        &:nth-child(odd) {
                            padding-right: 0 10px 0 0;
                        }
                        &:nth-child(even) {
                            padding: 0 0 0 10px;
                        }
                        .container {
                            & > div {
                                .item-up {
                                    padding: 0;
                                }
                                .item-down {
                                    padding: 0 5px;
                                    box-sizing: border-box;
                                    border-top: 1px solid #ccc;
                                    .content {
                                        font-size: 12px;
                                        line-height: 20px;
                                        height: 70px;
                                        box-sizing: border-box;
                                        padding-top: 15px;
                                    }
                                    .button {
                                        button {
                                            padding: 5px 15px;
                                            border: 1px solid #1994fa;
                                            color: #1994fa;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
